<script setup lang="ts">
import { ref, inject } from 'vue'
import { useStore } from '@store/index'
import {
    PageInfo, Music,
    addMusicToList, setSrcAndPlay, addMusicToListKey, setSrcAndPlayKey,
    popMessage, popMessageKey,
    switchLoginModelShowKey
} from '@/type';
import { collectMusicList } from '@utils/api';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useStore()
const addMusicToList = inject(addMusicToListKey) as addMusicToList
const setSrcAndPlay = inject(setSrcAndPlayKey) as setSrcAndPlay
const isLogin = storeToRefs(store).isLogin
const popMessage = inject(popMessageKey) as popMessage
const showLoginModel = inject(switchLoginModelShowKey) as () => void

// 获取 BASEURL
const BASEURL = store.getBaseUrl()

const props = defineProps<{
    pageInfo: PageInfo<any>
}>()

const showBtns = ref(-1)

// 改变按钮显示
const changeShowBtns = (index: number) => {
    showBtns.value = index
}

// 播放歌单
const play = (index: number) => {
    const musicList = props.pageInfo.list[index].musicList as [Music]
    setSrcAndPlay({
        id: musicList[0].musicId,
        url: musicList[0].src,
        name: musicList[0].title,
        duration: musicList[0].duration,
        singerName: props.pageInfo.list[index].singerList[0].name,
        image: musicList[0].image as string,
        typeId: musicList[0].musicId as string,
        from: 'musicList'
    })
    for (let i = 1; i < musicList.length; i++) {
        addMusicToList({
            id: musicList[i].musicId,
            url: musicList[i].src,
            name: musicList[i].title,
            duration: musicList[i].duration,
            singerName: props.pageInfo.list[index].singerList[i].name,
            image: musicList[i].image as string,
            typeId: musicList[i].musicId as string,
            from: 'musicList'
        })
    }
}

// 添加歌单的音乐
const add = (index: number) => {
    const musicList = props.pageInfo.list[index].musicList as [Music]
    for (let i = 0; i < musicList.length; i++) {
        addMusicToList({
            id: musicList[i].musicId,
            url: musicList[i].src,
            name: musicList[i].title,
            duration: musicList[i].duration,
            singerName: props.pageInfo.list[index].singerList[i].name,
            image: musicList[i].image as string,
            typeId: musicList[i].musicId as string,
            from: 'musicList'
        })
    }
}

// 收藏歌单
const collect = (index: number) => {
    const list = props.pageInfo.list[index]

    if (isLogin.value === 1) {
        collectMusicList(list.id).then(res => {
            if (res.data.code == 1) {
                popMessage('收藏成功', 'success')
            } else {
                popMessage('已经收藏', 'success')
            }
        })
    } else {
        showLoginModel()
        popMessage('未登录', 'error')
    }
}

const gotoMusicListPage = (id: number) => {
    router.push('/musicList/' + id + '/true')
}


</script>

<template>
    <ul class="music-list-list">
        <li v-for="item, index in props.pageInfo.list" @mouseover="changeShowBtns(index)" @mouseleave="changeShowBtns(-1)"
            :class="{ alternating: index % 2 !== 0 }">
            <div class="music-list-left">
                <img @click="play(index)" class="play" src="../../assets/play.svg" alt="">
                <img @click="gotoMusicListPage(item.id)" class="image" :src="BASEURL + '/static/image/' + item.image"
                    alt="">
                <div @click="gotoMusicListPage(item.id)" class="music-list-name">
                    <span>{{ item.title }}</span>
                </div>
            </div>

            <div class="music-list-right">
                <div class="btns" v-if="showBtns === index">
                    <img @click="add(index)" class="add-play" src="../../assets/add-999.svg">
                    <img @click="collect(index)" class="collect" src="../../assets/collect-999.svg">
                </div>
                <div class="musicCount">{{ item.musicList.length }}首</div>
                <div class="creator">by&nbsp;<a @click="router.push('/personCenter/' + item.creatorId + '/false')">{{
                    item.creatorName }}</a></div>
                <div class="collectCount">收藏：{{ item.collectCount }}</div>
                <div class="playCount">收听：{{ item.playCount }}</div>
            </div>
        </li>

    </ul>
</template>

<style scoped lang="css">
.music-list-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left: 0;

}

.music-list-list li {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    /* margin-bottom: 2px; */
    /* padding-left: 32px; */
    /* padding-bottom: 30px; */
    /* box-sizing: border-box; */
}

.alternating {
    background-color: #fbfbfb;
}

.music-list-list li:hover {
    /* margin: -1px; */
    /* border: 1px solid #ccc; */
    /* box-sizing: border-box; */
    box-shadow: 0 0 10px #ccc;
    background-color: #F2F2F2;

}

.music-list-left {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

li .music-list-left .play {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 0 20px;
}

li .music-list-left .image {
    cursor: pointer;
    width: 50px;
    height: 50px;
    margin: 0 20px;
}

.music-list-name {
    display: block;
    font-size: 12px;
    /* width: 100%; */
}

.music-list-name span:hover {
    cursor: pointer;
    text-decoration-line: underline;

}

.music-list-right {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 12px;
}

.music-list-right div {
    margin-right: 10px;
}

.music-list-right .musicCount {}

.music-list-right .creator {
    width: 180px;
    color: #666;
}

.music-list-right .creator a:hover {
    cursor: pointer;
    text-decoration-line: underline;
}

.music-list-right .collectCount,
.music-list-right .playCount {
    width: 90px;
}

.add-play,
.collect {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
</style>